<template>
	<view class="detail">
		<u-navbar bgColor="rgba(0,0,0,0)">
			<view slot="left" class="align-center">
				<view class="flex-center1" style="border-radius: 50%; width: 72rpx; height: 72rpx; background: rgba(0, 0, 0, 0.4)">
					<image @click="$tools.back()" src="@/static/login/back4.png" style="width: 36rpx; height: 36rpx"></image>
				</view>
			</view>
		</u-navbar>
		<u-swiper :list="list1" height="500" @change="(e) => (currentNum = e.current)" :autoplay="false" indicatorStyle="right: 20px">
			<view slot="indicator" class="indicator-num flex-center1">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list1.length }}</text>
			</view>
		</u-swiper>
		<view style="padding: 32rpx; background-color: #fff">
			<view class="flex-between1" style="margin-bottom: 24rpx">
				<text style="font-size: 40rpx; color: #333333">{{ obj.companyName }}</text>
				<view class="align-center">
					<u-icon
						v-if="!obj.collectionStatus"
						@click="
							collect(id, 1);
							obj.collectionStatus = !obj.collectionStatus;
						"
						name="heart"
						size="46"
						color="#333333"
						style="margin-right: 40rpx"
					></u-icon>
					<u-icon
						v-else
						@click="
							collect(id, 1);
							obj.collectionStatus = !obj.collectionStatus;
						"
						size="46"
						color="red"
						name="heart-fill"
						style="margin-right: 40rpx"
					></u-icon>
					<!-- <u-icon name="share" size="46" color="#333333"></u-icon> -->
				</view>
			</view>
			<view style="font-weight: 400; font-size: 28rpx; color: #666666; margin-bottom: 26rpx">
				<text v-if="obj.workType == 1">长期</text>
				<text v-if="obj.workType == 2">临时工</text>
				<text v-if="obj.workType == 3">小时工</text>
				<text v-if="obj.workType == 4">计件工</text>
				<text v-if="obj.workType == 5">其他</text>
				<text>{{ obj.address }}</text>
				<text v-if="obj.isSocial == 1">｜ 社保</text>
				<text>｜{{ obj.label }}</text>
			</view>
			<!-- <view style="font-weight: 400; font-size: 24rpx; color: #666666; margin-bottom: 36rpx">酒店大堂经理，餐厅服务员，保洁…20+个</view> -->
			<view style="width: 686rpx; height: 1rpx; background: #eeeeee; margin-bottom: 40rpx"></view>
			<view class="align-center" style="margin-bottom: 22rpx">
				<view class="align-center">
					<view style="width: 120rpx">
						<view style="font-weight: 300; font-size: 20rpx; color: #999999">招聘人数</view>
						<view style="font-weight: 600; font-size: 32rpx; color: #1365f9">{{ obj.total }}人</view>
					</view>
					<view style="width: 2rpx; height: 64rpx; background: #eeeeee; margin-left: 40rpx"></view>
				</view>
				<view class="align-center" style="margin-left: 40rpx">
					<view style="width: 120rpx">
						<view style="font-weight: 300; font-size: 20rpx; color: #999999">已报名人数</view>
						<view style="font-weight: 600; font-size: 32rpx; color: #333333">{{ obj.signCount }}人</view>
					</view>
					<view style="width: 2rpx; height: 64rpx; background: #eeeeee; margin-left: 40rpx"></view>
				</view>
				<!-- <view class="align-center" style="margin-left: 40rpx">
					<view class="">
						<view style="font-weight: 300; font-size: 20rpx; color: #999999">地点</view>
						<view class="ellipsis" style="font-weight: 600; font-size: 32rpx; color: #333333">{{ obj.address }}</view>
					</view>
					<view style="width: 2rpx; height: 64rpx; background: #eeeeee; margin-left: 40rpx"></view>
				</view> -->
			</view>
			<!-- <view style="font-weight: 400; font-size: 24rpx; color: #666666">1天前172****7636报名了此岗位</view> -->
		</view>
		<view style="padding: 40rpx" class="flex-center1">
			<view class="align-center">
				<view :class="current == 1 ? 'btn1' : 'btn2'" class="flex-center1" @click="current = 1">岗位详情</view>
				<view style="width: 40rpx; height: 1rpx; background: #130d60"></view>
				<view :class="current == 2 ? 'btn1' : 'btn2'" class="flex-center1" @click="current = 2">其他岗位</view>
			</view>
		</view>
		<view style="padding: 0 32rpx 50rpx" v-if="current == 1">
			<view class="card" style="margin-bottom: 20rpx">
				<view style="margin-bottom: 26rpx; font-weight: 600; font-size: 32rpx; color: #333333">
					{{ obj.jobName }}
				</view>
				<view class="flex-between1">
					<view class="align-center">
						<image
							src="http://ant-chat.oss-cn-hangzhou.aliyuncs.com/75de2ce2-0be7-48c4-b83f-9d0952f3a84d.jpg"
							style="width: 84rpx; height: 84rpx; border-radius: 8rpx"
						></image>
						<view style="margin-left: 20rpx">
							<view>
								<text style="font-weight: 600; font-size: 28rpx; color: #333333; margin-right: 20rpx">{{ obj.contacts }}</text>
								<text style="font-weight: 400; font-size: 24rpx; color: #999999">{{ obj.phone }}</text>
							</view>
							<view
								class="flex-center1"
								style="
									width: 100rpx;
									height: 40rpx;
									background: rgba(10, 124, 232, 0.1);
									border-radius: 8rpx;
									border: 1rpx solid #1365f9;
									font-size: 24rpx;
									color: #1365f9;
								"
							>
								已实名
							</view>
						</view>
					</view>
					<!-- <view class="align-center flex-center1" style="width: 172rpx; height: 72rpx; background: rgba(10, 124, 232, 0.1); border-radius: 8rpx">
						<u-icon name="phone-fill" size="36" color="#0A7CE8"></u-icon>
						<text style="font-size: 28rpx; color: #0a7ce8">电话联系</text>
					</view> -->
				</view>
			</view>
			<view class="card">
				<view class="label" style="margin-bottom: 26rpx">岗位详情</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">工作时间</view>
					<view class="text2">{{ obj.jobTime }}</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">薪资范围</view>
					<view class="text2">{{ obj.salaryStart + '-' + obj.salaryEnd }} 元/月</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">结算方式</view>
					<view class="text2" v-if="obj.settleType == 1">日结</view>
					<view class="text2" v-if="obj.settleType == 2">周结</view>
					<view class="text2" v-if="obj.settleType == 3">月结</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">工期</view>
					<view class="text2" v-if="obj.workType == 1">长期</view>
					<view class="text2" v-if="obj.workType == 2">临时</view>
					<view class="text2" v-if="obj.workType == 3">小时</view>
					<view class="text2" v-if="obj.workType == 4">计件</view>
					<view class="text2" v-if="obj.workType == 5">其他</view>
				</view>
				<view class="align-center">
					<view class="text1" style="margin-right: 50rpx">其他</view>
					<view class="text2">{{ obj.workType }}</view>
				</view>
			</view>
			<view class="card">
				<view class="label" style="margin-bottom: 26rpx">职位要求</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">年龄</view>
					<view class="text2">{{ obj.age }}</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">工龄</view>
					<view class="text2">{{ obj.workYear }}年</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">性别</view>
					<view class="text2" v-if="obj.sex == 1">男</view>
					<view class="text2" v-if="obj.sex == 2">女</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">学历</view>
					<view class="text2">{{ obj.education }}</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					<view class="text1" style="margin-right: 50rpx">所学专业</view>
					<view class="text2">{{ obj.major }}</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx" v-if="obj.height">
					<view class="text1" style="margin-right: 50rpx">身高</view>
					<view class="text2">{{ obj.height }}</view>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx" v-if="obj.weight">
					<view class="text1" style="margin-right: 50rpx">体重</view>
					<view class="text2">{{ obj.weight }}</view>
				</view>
				<view style="margin-bottom: 26rpx" v-if="obj.weight">
					<view class="text1" style="margin-right: 50rpx">健康证</view>
					<image :src="obj.healthCertificate" style="width: 100%" mode="widthFix"></image>
				</view>
				<view class="align-center" style="margin-bottom: 26rpx" v-if="obj.personalImage">
					<view class="text1" style="margin-right: 50rpx">个人形象</view>
					<view class="text2">{{ obj.personalImage }}</view>
				</view>
				<view class="align-center" v-if="obj.physicalCondition">
					<view class="text1" style="margin-right: 50rpx">身体状况</view>
					<view class="text2">{{ obj.physicalCondition }}</view>
				</view>
			</view>
			<view class="card" style="margin-bottom: 20rpx">
				<view class="label" style="margin-bottom: 26rpx">职位描述</view>
				<view class="align-center" style="margin-bottom: 26rpx">
					{{ obj.desc }}
				</view>
			</view>
			<view class="card">
				<view class="flex-between1" style="margin-bottom: 20rpx">
					<view class="align-center">
						<image src="@/static/index/icon4.png" style="width: 34rpx; height: 40rpx"></image>
						<view style="font-size: 32rpx; color: #333333; margin-left: 6rpx">好活安全保障</view>
					</view>
					<view style="font-size: 28rpx; color: #1365f9">查看 ></view>
				</view>
				<view class="">
					<text style="font-weight: 400; font-size: 28rpx; color: #999999">如遇到办证收费、刷单、传销、诱导买车等违规行 为，请立即向好活网</text>
					<text style="font-weight: 400; font-size: 28rpx; color: #1365f9">投诉举报 ></text>
				</view>
			</view>

			<view @click="current = 2" class="flex-center1" style="position: fixed; bottom: 0; left: 0; width: 100%; height: 160rpx; padding: 10rpx 32rpx; background: #fff">
				<view class="flex-center1" style="width: 640rpx; height: 96rpx; background: #1365f9; border-radius: 16rpx; font-weight: 600; font-size: 32rpx; color: #ffffff">
					前往公司岗位列表，查看更多岗位
				</view>
			</view>
		</view>
		<view style="padding: 0 32rpx 50rpx" v-if="current == 2">
			<view
				@click="
					id = item.id;
					init();
				"
				v-for="(item, index) in list"
				:key="index"
				style="background: #ffffff; padding: 34rpx 40rpx; margin-bottom: 20rpx"
			>
				<view class="flex-between1" style="margin-bottom: 20rpx">
					<text style="font-weight: 600; font-size: 32rpx; color: #333333">{{ item.jobName }}</text>
					<u-icon
						v-if="!item.collectionStatus"
						@click.native.stop="
							collect(item.id, 1);
							item.collectionStatus = !item.collectionStatus;
						"
						name="heart"
						size="46"
						color="#333333"
						style="margin-right: 35rpx"
					></u-icon>
					<u-icon
						v-else
						@click.native.stop="
							collect(item.id, 1);
							item.collectionStatus = !item.collectionStatus;
						"
						name="heart-fill"
						size="46"
						color="red"
						style="margin-right: 35rpx"
					></u-icon>
				</view>
				<view class="flex-wrap" style="margin-bottom: 20rpx">
					<view style="background: #f8f8f8; border-radius: 8rpx; padding: 8rpx 20rpx">{{ obj.label }}</view>
				</view>
				<view class="flex-between">
					<text style="font-weight: 400; font-size: 24rpx; color: #999999">{{ item.createTime }}</text>
					<text style="font-weight: 400; font-size: 24rpx; color: #999999">
						<text style="font-weight: bold; font-size: 32rpx; color: #333333">{{ item.salaryStart }} - {{ item.salaryEnd }}</text>
						/月
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 1,
			currentNum: 0,
			list1: [],
			id: '',
			obj: {},
			list: []
		};
	},
	onLoad(option) {
		this.id = option.value;
		this.init();
	},
	methods: {
		async init() {
			await this.getdetail();
			await this.getqt();
			uni.$u.mpShare = {
				title: this.obj.companyName, // 默认为小程序名称，可自定义
				path: `/pages/index/detail?value=${this.id}`, // 默认为当前页面路径，一般无需修改，QQ小程序不支持
				// 分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。
				// 支持PNG及JPG，默认为当前页面的截图
				imageUrl: this.list1[0]
			};
		},
		getdetail() {
			this.$request('front/user/postDetail', {
				id: this.id
			}).then((res) => {
				console.log(res, '详情');
				this.obj = res.obj;
				this.list1 = res.obj.projectImg.split(',');
			});
		},
		getqt() {
			this.$request('front/user/otherPost', {
				id: this.id
			}).then((res) => {
				console.log(res, '其他岗位');
				this.list = res.obj;
			});
		},
		async apply() {
			if (await this.getsm()) {
				this.$tools.navigite('./apply', this.obj.id);
			} else {
				this.$tools.navigite('./realname');
			}
		},
		async callphone() {
			await this.statis(this.obj.id, 2);
		}
	}
};
</script>

<style lang="less" scoped>
.detail {
	padding-bottom: 180rpx;
	background-color: #f5f6fa;
	.label {
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
	}
	.text1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		width: 150rpx;
	}
	.text2 {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	.btn1 {
		width: 240rpx;
		height: 76rpx;
		background: #130d60;
		border-radius: 38rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
	}
	.btn2 {
		width: 240rpx;
		height: 76rpx;
		border-radius: 38rpx;
		border: 1rpx solid #130d60;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	.card {
		padding: 30rpx 40rpx;
		background-color: #fff;
	}
	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;

		&__text {
			color: #ffffff;
			font-size: 12px;
		}
	}
	.ellipsis {
		white-space: nowrap; /* 确保文本在一行内显示 */
		overflow: hidden; /* 隐藏溢出的内容 */
		text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	}
}
</style>
